<template>
  <div class="product-cascader-demo">
    <h2>ProductCascader 组件示例</h2>
    
    <div class="demo-section">
      <h3>基础用法</h3>
      <ProductCascader
        v-model:brand-id="basicForm.brandId"
        v-model:spu-id="basicForm.spuId"
        v-model:sku-id="basicForm.skuId"
        @change="handleBasicChange"
      />
      <div class="result">
        <p>选择结果：{{ JSON.stringify(basicForm, null, 2) }}</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>表单中使用（带验证）</h3>
      <Form :model="formData" :rules="rules" ref="formRef">
        <ProductCascader
          v-model:brand-id="formData.brandId"
          v-model:spu-id="formData.spuId"
          v-model:sku-id="formData.skuId"
          brand-name="brandId"
          spu-name="spuId"
          sku-name="skuId"
          :brand-required="true"
          :spu-required="true"
          :sku-required="true"
        />
        <FormItem>
          <Button type="primary" @click="handleSubmit">提交</Button>
          <Button style="margin-left: 8px" @click="handleReset">重置</Button>
        </FormItem>
      </Form>
    </div>
    
    <div class="demo-section">
      <h3>只选择到 SPU 级别</h3>
      <ProductCascader
        v-model:brand-id="spuOnlyForm.brandId"
        v-model:spu-id="spuOnlyForm.spuId"
        :show-sku="false"
        @change="handleSpuOnlyChange"
      />
      <div class="result">
        <p>选择结果：{{ JSON.stringify(spuOnlyForm, null, 2) }}</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>不使用表单项包装</h3>
      <div style="display: flex; gap: 16px; align-items: center;">
        <span>品牌：</span>
        <div style="flex: 1;">
          <ProductCascader
            v-model:brand-id="noFormItemForm.brandId"
            v-model:spu-id="noFormItemForm.spuId"
            v-model:sku-id="noFormItemForm.skuId"
            :show-form-item="false"
            @change="handleNoFormItemChange"
          />
        </div>
      </div>
      <div class="result">
        <p>选择结果：{{ JSON.stringify(noFormItemForm, null, 2) }}</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>自定义布局和文本</h3>
      <ProductCascader
        v-model:brand-id="customForm.brandId"
        v-model:spu-id="customForm.spuId"
        v-model:sku-id="customForm.skuId"
        :gutter="24"
        :brand-span="6"
        :spu-span="9"
        :sku-span="9"
        brand-label="商品品牌"
        spu-label="商品SPU"
        sku-label="商品SKU"
        brand-placeholder="请选择商品品牌"
        spu-placeholder="请先选择商品品牌"
        sku-placeholder="请先选择商品SPU"
        @change="handleCustomChange"
      />
      <div class="result">
        <p>选择结果：{{ JSON.stringify(customForm, null, 2) }}</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>禁用状态</h3>
      <ProductCascader
        v-model:brand-id="disabledForm.brandId"
        v-model:spu-id="disabledForm.spuId"
        v-model:sku-id="disabledForm.skuId"
        :disabled="true"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Form, FormItem, Button, message } from 'ant-design-vue';
import ProductCascader from './index.vue';

// 基础用法
const basicForm = ref({
  brandId: '',
  spuId: '',
  skuId: ''
});

const handleBasicChange = (value: any) => {
  console.log('基础用法选择变化:', value);
};

// 表单用法
const formRef = ref();
const formData = ref({
  brandId: '',
  spuId: '',
  skuId: ''
});

const rules = {
  brandId: [{ required: true, message: '请选择品牌' }],
  spuId: [{ required: true, message: '请选择SPU' }],
  skuId: [{ required: true, message: '请选择SKU' }]
};

const handleSubmit = async () => {
  try {
    await formRef.value.validate();
    message.success('表单验证通过！');
    console.log('表单数据:', formData.value);
  } catch (error) {
    message.error('表单验证失败！');
  }
};

const handleReset = () => {
  formRef.value.resetFields();
};

// 只选择到SPU
const spuOnlyForm = ref({
  brandId: '',
  spuId: ''
});

const handleSpuOnlyChange = (value: any) => {
  console.log('SPU级别选择变化:', value);
};

// 不使用表单项包装
const noFormItemForm = ref({
  brandId: '',
  spuId: '',
  skuId: ''
});

const handleNoFormItemChange = (value: any) => {
  console.log('无表单项选择变化:', value);
};

// 自定义布局和文本
const customForm = ref({
  brandId: '',
  spuId: '',
  skuId: ''
});

const handleCustomChange = (value: any) => {
  console.log('自定义布局选择变化:', value);
};

// 禁用状态
const disabledForm = ref({
  brandId: '1',
  spuId: '1',
  skuId: '1'
});
</script>

<style scoped>
.product-cascader-demo {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 32px;
  padding: 24px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fafafa;
}

.demo-section h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #262626;
  font-size: 16px;
  font-weight: 600;
}

.result {
  margin-top: 16px;
  padding: 12px;
  background: #f0f0f0;
  border-radius: 4px;
  border-left: 4px solid #1890ff;
}

.result p {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
}
</style>
